<template>
	<view class="lease">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<!-- #endif -->
		<view class="headtop">
			<image :src="baseUrl + '/wximage/lease_top.png'"></image>
			<view class="nr">
				<view class="title">{{x_name}}</view>
				<view class="desc">租借确认</view>
			</view>
		</view>
		<view class="content">
			<view class="biaoti">
				<view class="hengxian1"></view>
				<view class="title">{{stationInfo.stationinfo.name}}</view>
				<view class="hengxian2"></view>
			</view>
			<view class="guize">
				<view class="title">计费规则</view>
				<view class="desc" v-if="ptbao == 2">
					<view>普通宝</view>
					<view>{{stationInfo.billinginfo.danjia}}元/{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}（不足{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}按{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}计费）租借{{stationInfo.billinginfo.mianfei}}分钟内免费（超出计入费用），日封顶{{stationInfo.billinginfo.dayconsume}}元
					总封顶{{stationInfo.billinginfo.maxmoney}}元，押金{{stationInfo.billinginfo.maxmoney}}元，支持免押服务。</view>
				</view>
				<view class="desc" v-if="kcbao == 2">
					<view>快充宝</view>
					<view>{{stationInfo.kbillinginfo.danjia}}元/{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}（不足{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}按{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}计费）租借{{stationInfo.kbillinginfo.mianfei}}分钟内免费（超出计入费用），日封顶{{stationInfo.kbillinginfo.dayconsume}}元
					总封顶{{stationInfo.kbillinginfo.maxmoney}}元，押金{{stationInfo.kbillinginfo.maxmoney}}元，支持免押服务。</view>
				</view>
			</view>
			<view class="guize" v-if="huiyuan.status == 1">
				<view class="title">会员权益</view>
				<view class="color" v-if="huiyuan.list.jm_leixing == 1">
					单日可用{{huiyuan.list.cishu}}次，每次免{{huiyuan.list.shichang}}个小时租借费用
				</view>
				<view class="color" v-if="huiyuan.list.jm_leixing == 2">
					单日可用{{huiyuan.list.cishu}}次，每次免{{huiyuan.list.jine}}元租借费用
				</view>
			</view>
			<view class="biaoti">
				<view class="hengxian1"></view>
				<view class="title">温馨提示</view>
				<view class="hengxian2"></view>
			</view>
			<view class="tishi">充电宝显示红灯，表示电量即将耗尽</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="fangshi1" v-if="mianyastatus == 0">
				<view class="right" @click="chongya()">
					充押金租借
				</view>
			</view>
			<view class="fangshi clearfix" v-else-if="hidden">
				<view class="left fl" @click="chongya()">
					充押金租借
				</view>
				<view class="right fr" @click="mianya()">
					免押金租借
				</view>
			</view>
			<view class="fangshi1" v-else>
				<view class="right" @click="tkstatus = true">
					免押金租借
				</view>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-ALIPAY -->
			<view class="fangshi1" v-if="alipaymianyastatus == 1">
				<view class="right" @click="chongya()">
					充押金租借
				</view>
			</view>
			<view class="fangshi clearfix" v-else-if="hidden">
				<view class="left fl" @click="chongya()">
					充押金租借
				</view>
				<view class="right fr" @click="mianya()">
					免押金租借
				</view>
			</view>
			<view class="fangshi1" v-else>
				<view class="right" @click="tkstatus = true">
					免押金租借
				</view>
			</view>
			<!-- #endif -->
			<view class="foot">
				<!-- #ifdef MP-WEIXIN -->
				<view class="zhifufen">
					<image :src="baseUrl + '/wximage/lease_zhifufen.png'"></image>
					<view class="name">微信支付分丨550分及以上优享</view>
				</view>
				<!-- #endif -->
				
				<view class="xieyi">
					<image :src="baseUrl + '/wximage/lease_xuanzhong.png'" v-if="xuanzhong == true"
						@click="xuanzhong = false"></image>

					<image :src="baseUrl + '/wximage/lease_wxuanzhong.png'" v-else @click="xuanzhong = true"></image>
					<view class="name">点击即同意<text
							@click="topage('/pages/lease/article_detail?id=2')">《充值说明》</text>、<text
							@click="topage('/pages/lease/article_detail?id=4')">《委托代扣授权书》</text></view>
				</view>
			</view>
		</view>

		<view class="beijing" v-if="tkstatus == true"></view>

		<view class="tankuang" v-if="tkstatus == true">
			<image :src="baseUrl + '/wximage/lease_tkbj.png'" class="bj"></image>
			<image :src="baseUrl + '/wximage/lease_guanbi.png'" class="guanbi" @click="tkstatus = false"></image>
			<view class="neirong">
				<view class="xzleixing">
					<view class="title">请选择充电宝类型</view>
					<view class="xuanze clearfix">
						<view class="left fl clearfix" v-if="ptbao == 2">
							<image :src="baseUrl + '/wximage/lease_danxuan1.png'" class="fl" v-if="attrIndex == 1">
							</image>
							<image :src="baseUrl + '/wximage/lease_danxuan.png'" class="fl" v-else @click="attrIndex = 1">
							</image>
							<view class="fl">
								<view class="name">普通宝</view>
								<view class="price">
									<text>{{stationInfo.billinginfo.danjia}}</text>元/{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}
								</view>
							</view>
						</view>
						<view class="left fl clearfix" v-if="kcbao == 2">
							<image :src="baseUrl + '/wximage/lease_danxuan1.png'" class="fl" v-if="attrIndex == 2">
							</image>
							<image :src="baseUrl + '/wximage/lease_danxuan.png'" class="fl" v-else @click="attrIndex = 2">
							</image>
							<view class="fl">
								<view class="name">快充宝</view>
								<view class="price">
									<text>{{stationInfo.kbillinginfo.danjia}}</text>元/{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="guize">
					<view class="title">计费规则</view>
					<view class="desc" v-if="ptbao == 2">普通宝</view>
					<view class="descname" v-if="ptbao == 2">
						{{stationInfo.billinginfo.danjia}}元/{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}（不足{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}按{{stationInfo.billinginfo.minute}}{{stationInfo.billinginfo.attr==1?'分钟':'小时'}}计费）租借{{stationInfo.billinginfo.mianfei}}分钟内免费（超出计入费用），日封顶{{stationInfo.billinginfo.dayconsume}}元
						总封顶{{stationInfo.billinginfo.maxmoney}}元，押金{{stationInfo.billinginfo.maxmoney}}元，支持免押服务。</view>
					<view class="desc" v-if="kcbao == 2">快充宝</view>
					<view class="descname" v-if="kcbao == 2">
						{{stationInfo.kbillinginfo.danjia}}元/{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}（不足{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}按{{stationInfo.kbillinginfo.minute}}{{stationInfo.kbillinginfo.attr==1?'分钟':'小时'}}计费）租借{{stationInfo.kbillinginfo.mianfei}}分钟内免费（超出计入费用），日封顶{{stationInfo.kbillinginfo.dayconsume}}元
						总封顶{{stationInfo.kbillinginfo.maxmoney}}元，押金{{stationInfo.kbillinginfo.maxmoney}}元，支持免押服务。</view>
				</view>
				<view class="queren">
					<view class="right" @click="chongdian()">
						确认
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				hidden: true,
				xuanzhong: true,
				tkstatus: false,
				attrIndex: 1,
				stationInfo: {},
				qrcode: '',
				myajin: 0,
				x_name: '',
				mianyastatus: 1,
				alipaymianyastatus: 1,
				huiyuan: {
					status: 2,
					list: {

					}
				},
				ptbao: 1,
				kcbao: 1,
			}
		},
		onLoad(options) {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}

			//获取基本配置信息
			this.request({
				url: '/xcx/webconfig',
				data: {}
			}).then(res => {
				if (res.data.code == 200) {
					this.x_name = res.data.data.x_name;
					this.alipaymianyastatus = res.data.data.alipaymianyastatus;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})

			this.qrcode = options.qrcode;

			//设备信息
			this.stationinfo();

			// 会员权益
			this.request({
				url: '/xcx/membercard',
				data: {
					user_id: uni.getStorageSync('user_id'),
					qrcode: this.qrcode,
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.huiyuan = res.data.data;
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
				}
			})
			
			//设备类型
			this.request({
				url: '/xcx/chargerbattery',
				data: {
					qrcode: this.qrcode,
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.ptbao = res.data.data.ptbao;
					this.kcbao = res.data.data.kcbao;
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
				}
			})
		},
		methods: {
			chongdian() {
				//判断一下
				if (this.myajin == 0) { //不免押
					//直接支付
					var formData = {
						qrcode: this.qrcode,
						attr: this.attrIndex,
						userid: uni.getStorageSync('user_id'),
						coupons_id: 0,
						coupons_user_id: 0,
					};
					var that = this;
					
					// #ifdef MP-WEIXIN
					this.request({
						url: '/lease/wxchongpay',
						data: formData,
						method: "POST"
					}).then(res => {
						if (res.data.code == 200) {
							var danhao = res.data.data.orderinfo.danhao;
							uni.requestPayment({
								'timeStamp': res.data.data.payinfo.timeStamp,
								'nonceStr': res.data.data.payinfo.nonceStr,
								'package': res.data.data.payinfo.package,
								'signType': 'MD5',
								'paySign': res.data.data.payinfo.paySign,
								'success': function(res) {
									uni.redirectTo({
										url: '/pages/lease/progress?prepayid=' + danhao
									})
								},
								'fail': function(res) {

								},
								'complete': function(res) {
									// console.log('complete');
								}
							});
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					});
					// #endif
					
					// #ifdef MP-ALIPAY
					this.request({
						url: '/alipay/recharge',
						data: formData,
						method: "POST"
					}).then(res => {
						var danhao = res.data.data.orderinfo.danhao;
						my.tradePay({
							tradeNO: res.data.data.payinfo.trade_no,
							success: (res1) => {
								if (res1.resultCode == 9000) {
									uni.showToast({
										title: '支付成功',
										icon: 'none',
									});
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/lease/progress?prepayid=' + danhao
										})
									}, 2000);
								} else {
									// 支付不成功，具体原因看返回，去对照文档
								}
							},
							fail: (err1) => {
								console.log(err1);
							}
						});
					})
					// #endif
				} else { //免押金
					//跳转页面开始
					uni.redirectTo({
						url: '/pages/lease/queren?qrcode=' + this.qrcode + '&attrindex=' + this.attrIndex
					})
				}
			},
			chongya() {
				this.myajin = 0;
				this.tkstatus = true;
			},
			mianya() {
				this.myajin = 1;
				this.tkstatus = true;
			},
			stationinfo() {
				var formData = {
					'qrcode': this.qrcode
				};
				//请求接口绑定该商户
				this.request({
					url: '/lease/stationinfo',
					data: formData,
					method: "GET"
				}).then(res => {
					if (res.data.code == 200) {
						this.stationInfo = res.data.data;
						
						this.mianyastatus = this.stationInfo.stationinfo.depositstatus;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
						
						setTimeout(function(){
							uni.reLaunch({
								url: '/pages/index/index'
							})
						},2000)
					}
				})
			},
			fanhui() {
				uni.navigateBack()
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.lease {
		width: 100%;
		margin: 0 auto;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
			}

			.iconfont {
				position: absolute;
				top: 0;
				left: 14rpx;
				font-size: 44rpx;
			}
		}

		.headtop {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 90;

			image {
				width: 100%;
				height: 628rpx;
			}

			.nr {
				position: absolute;
				top: 290rpx;
				left: 42rpx;

				.title {
					font-size: 44rpx;
					color: #000000;
					font-weight: 700;
					margin-bottom: 20rpx;
				}

				.desc {
					font-size: 44rpx;
					color: #000000;
					font-weight: 700;
				}
			}
		}

		.content {
			width: 84%;
			position: absolute;
			top: 560rpx;
			left: 8%;
			z-index: 200;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 0 30rpx 60rpx;


			.biaoti {
				width: 380rpx;
				margin: 0 auto;
				text-align: center;
				position: relative;
				margin-top: 40rpx;

				.title {
					font-size: 32rpx;
					font-weight: 700;
					color: #000000;
				}

				.hengxian1 {
					width: 90rpx;
					height: 2rpx;
					border-radius: 2rpx;
					background: linear-gradient(90deg, rgba(239, 239, 239, 0), rgba(219, 219, 219, 1));
					position: absolute;
					top: 22rpx;
					left: 0;
				}

				.hengxian2 {
					width: 90rpx;
					height: 2rpx;
					border-radius: 2rpx;
					background: linear-gradient(90deg, rgba(219, 219, 219, 1), rgba(239, 239, 239, 0));
					position: absolute;
					top: 22rpx;
					right: 0;
				}
			}

			.guize {
				width: 100%;
				margin: 0 auto;
				padding: 0 10rpx;
				box-sizing: border-box;

				.title {
					font-size: 28rpx;
					color: #000000;
					font-weight: 700;
					margin-top: 40rpx;
				}
				
				.color{
					font-size: 28rpx;
					line-height: 40rpx;
					color: #fdd840;
				}

				.desc {
					font-size: 24rpx;
					color: #999999;
					line-height: 40rpx;
					margin-top: 20rpx;
				}
			}

			.tishi {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				margin-top: 20rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
			}

			.fangshi {
				margin-top: 50rpx;

				.left {
					width: 48%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					font-size: 36rpx;
					color: #08D8C2;
					font-weight: 600;
					box-shadow: inset 0px 0px 1px 1px #08D8C2;
					border-radius: 46rpx;
				}

				.right {
					width: 48%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					font-size: 36rpx;
					color: #FFFFFF;
					font-weight: 600;
					background: linear-gradient(to bottom, #AFFFF7, #00D6C0);
					border-radius: 46rpx;
				}
			}

			.fangshi1 {
				margin-top: 50rpx;

				.right {
					width: 100%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					font-size: 36rpx;
					color: #FFFFFF;
					font-weight: 600;
					background: linear-gradient(to bottom, #AFFFF7, #00D6C0);
					border-radius: 46rpx;
				}
			}
		}

		.foot {
			width: 100%;
			margin: 0 auto;
			text-align: center;
			margin-top: 50rpx;

			// #ifdef MP-ALIPAY
			.zhifufen {
				display: flex;
				justify-content: center;
				height: 40rpx;
				line-height: 40rpx;

				image {
					width: 35rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				
				.name {
					font-size: 24rpx;
					color: #999999;
				}
			}
			//#endif
			
			// #ifdef MP-WEIXIN
			.zhifufen {
				display: flex;
				justify-content: center;
				height: 52rpx;
				line-height: 52rpx;
			
				image {
					width: 52rpx;
					height: 52rpx;
					margin-right: 10rpx;
				}
				
				.name {
					font-size: 24rpx;
					color: #999999;
				}
			}
			//#endif
			
			.xieyi {
				display: flex;
				justify-content: center;
				height: 28rpx;
				line-height: 28rpx;
				margin-top: 20rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 6rpx;
				}

				.name {
					font-size: 20rpx;
					color: #999999;

					text {
						font-size: 20rpx;
						color: #0CD9C4;
					}
				}
			}
		}

		.beijing {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			height: 100vh;
			background: #000000;
			opacity: 0.5;
			z-index: 300;
		}

		.tankuang {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 310;

			.bj {
				width: 100%;
				height: 964rpx;
			}

			.guanbi {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				width: 52rpx;
				height: 52rpx;
				z-index: 10;
			}

			.neirong {
				position: absolute;
				top: 20rpx;
				width: 100%;
				left: 0;
				padding: 0 30rpx;
				box-sizing: border-box;

				.xzleixing {
					width: 100%;
					margin-top: 10rpx;

					.title {
						font-size: 34rpx;
						color: #333333;
						font-weight: 700;
					}

					.xuanze {
						width: 100%;
						margin-top: 50rpx;

						.left {
							width: 50%;
							// margin-right: 100rpx;

							image {
								width: 44rpx;
								height: 44rpx;
								margin-right: 10rpx;
							}

							.name {
								font-size: 34rpx;
								color: #000000;
								font-weight: 700;
								margin-bottom: 10rpx;
							}

							.price {
								font-size: 24rpx;
								color: #666666;

								text {
									font-size: 34rpx;
									color: #666666;
								}
							}
						}
					}
				}

				.guize {
					width: 100%;
					margin: 0 auto;
					padding: 0 10rpx;
					box-sizing: border-box;

					.title {
						font-size: 34rpx;
						color: #333333;
						font-weight: 700;
						margin-top: 60rpx;
						margin-bottom: 22rpx;
					}

					.desc {
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
					}
					
					.color{
						font-size: 28rpx;
						line-height: 40rpx;
						color: #fdd840;
					}

					.descname {
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						margin-bottom: 30rpx;
					}
				}

				.queren {
					margin-top: 72rpx;

					.right {
						width: 90%;
						margin: 0 auto;
						height: 92rpx;
						line-height: 92rpx;
						text-align: center;
						font-size: 36rpx;
						color: #FFFFFF;
						font-weight: 600;
						background: linear-gradient(to bottom, #AFFFF7, #00D6C0);
						border-radius: 46rpx;
					}
				}
			}
		}
	}
</style>